import { Button, Form, Table } from 'antd';
import { AutoSizer, List } from 'react-virtualized';
const virtualized = () => {
  const data = Array.from({ length: 100 }, (_, index) => `Item ${index}`);
  const rowRenderer = ({ fields, remove }) => {
    // console.log('内部', fields);
    console.log('内部渲染');
    return (
      <div>
        {fields.map((key, name, ...restField) => (
          <>
            <Table dataSource={dataSource} columns={columns}></Table>
            <Button
              type="dashed"
              onClick={() => remove(name)}
              style={{ width: '300' }}
            >
              删除
            </Button>
          </>
        ))}
      </div>
    );
  };
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  return (
    <Form
      initialValues={{
        boxList: [
          {
            fbaCode: '',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
          {
            fbaCode: '22',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
          {
            fbaCode: '22',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
          {
            fbaCode: '22',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
          {
            fbaCode: '22',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
          {
            fbaCode: '22',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
          {
            fbaCode: '22',
            height: '',
            width: '',
            length: '',
            pcs: '1',
            boxDetailList: [{ declareNum: '1' }],
          },
        ],
      }}
    >
      <AutoSizer>
        {({ width, height }) => (
          <>
            <Form.List name={'boxList'}>
              {(fields, { add, remove }) => {
                //console.log('外部', fields);
                console.log('外部渲染');
                return (
                  <>
                    <List
                      width={width}
                      height={600}
                      rowCount={1}
                      rowHeight={600}
                      rowRenderer={() => rowRenderer({ fields, remove })}
                    />
                    <div>
                      <Button
                        type="dashed"
                        onClick={() => add()}
                        style={{ width: '300' }}
                      >
                        添加
                      </Button>
                    </div>
                  </>
                );
              }}
            </Form.List>
          </>
        )}
      </AutoSizer>
    </Form>
  );
};

export default virtualized;
